<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息管理</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">

    <!-- Favicon -->
<!--    <link rel="shortcut icon" href="background/images/favicon.ico">-->
<!--    &lt;!&ndash; Switchery css &ndash;&gt;-->
<!--    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />-->
<!--    &lt;!&ndash; Bootstrap CSS &ndash;&gt;-->
<!--    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
<!--    &lt;!&ndash; Font Awesome CSS &ndash;&gt;-->
<!--    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />-->
<!--    &lt;!&ndash; Custom CSS &ndash;&gt;-->
<!--    <link href="background/css/style.css" rel="stylesheet" type="text/css" />-->
<!--    &lt;!&ndash; BEGIN CSS for this page &ndash;&gt;-->
<!--    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>-->
    <link href="background/plugins/datetimepicker/css/daterangepicker.css" rel="stylesheet" />
    <!--引入adminkit模板-->
    <link href="adminkit/css/app.css" rel="stylesheet">

    <!-- END CSS for this page -->
</head>

<body >
<div class="wrapper" >
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">后台管理</span>
            </a>

            <ul class="sidebar-nav">

                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/dashboard}">
                        <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">首页</span>
                    </a>
                </li>


                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/publishedArticleManage}">
                        <i class="align-middle" data-feather="book"></i> <span class="align-middle">文章管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/kindManage}">
                        <i class="align-middle" data-feather="credit-card"></i> <span class="align-middle">分类管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/tagManage}">
                        <i class="align-middle" data-feather="tag"></i> <span class="align-middle">标签管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/commentManage}">
                        <i class="align-middle" data-feather="message-square"></i> <span class="align-middle">评论管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/frontInfo}">
                        <i class="align-middle" data-feather="airplay"></i> <span class="align-middle">外观管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" th:href="@{/statistics}">
                        <i class="align-middle" data-feather="box"></i> <span class="align-middle">统计</span>
                    </a>
                </li>
                <li class="sidebar-item active">
                    <a class="sidebar-link" th:href="@{/adminInfo}">
                        <i class="align-middle" data-feather="user"></i> <span class="align-middle">个人信息管理</span>
                    </a>
                </li>
            </ul>


        </div>
    </nav>
    <div class="main">
        <!-- top bar navigation -->

        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>
            <a th:href="@{/}" class="btn btn-outline-info" disabled>返回前台首页</a>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="message-square"></i>
                                <span class="indicator" >[[${session.unReadCount}]]</span>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                            <div class="dropdown-menu-header">
                                <div class="position-relative">
                                    [[${session.unReadCount}]]条新评论
                                </div>
                            </div>
                            <div class="list-group">
                                <a th:href="@{/commentManage}" class="list-group-item" th:each="comment:${session.unReadComment}">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-danger" data-feather="alert-circle"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">[[${comment.name}]]</div>
                                            <div class="text-muted small mt-1">[[${comment.content}]]</div>
                                            <div class="text-muted small mt-1">[[${ #dates.format(comment.time,'yyyy年MM月dd日 ')}]]</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a th:href="@{/commentManage}" class="text-muted">所有评论</a>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown" >
                            <img th:src="${session.admin.img}" class="avatar img-fluid rounded mr-1"  th:alt="${session.admin.name}"/> <span class="text-dark">[[${session.admin.name}]]</span>                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" th:href="@{/logout}">Log out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="content" >
            <div class="container-fluid p-0">

                <h1 class="h3 mb-3">个人信息管理</h1>

                <div class="row">
                    <div class="col-md-3 col-xl-2">

                        <div class="card">
                            <div class="list-group list-group-flush" role="tablist">
                                <a class="list-group-item list-group-item-action active" data-toggle="list" href="#account" role="tab">
                                    用户信息
                                </a>
                                <a class="list-group-item list-group-item-action" data-toggle="list" href="#password" role="tab"  >
                                    修改密码
                                </a>
                                <a class="list-group-item list-group-item-action" data-toggle="list" href="#setInfo" role="tab">
                                    修改基本信息
                                </a>
                                <a class="list-group-item list-group-item-action" data-toggle="list" href="#setContact" role="tab">
                                    修改联系方式
                                </a>

                            </div>
                        </div>
                    </div>

                    <div class="col-md-9 col-xl-10">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="account" role="tabpanel">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">用户信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row clearfix">
                                            <div class="col-md-12 column">
                                                <table class="table table-hover table-striped">
                                                    <tr>
                                                        <td>昵称</td>
                                                        <td th:text="${admin.getName()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>性别</td>
                                                        <td th:text="${admin.getSex()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>出生日期</td>
                                                        <td th:text="${#dates.format(admin.getBirthday(),'yyyy年MM月dd日')}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>所在地区</td>
                                                        <td th:text="${admin.getAddress()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>邮箱</td>
                                                        <td th:text="${admin.getEmail()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>电话</td>
                                                        <td th:text="${admin.getPhone()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>QQ</td>
                                                        <td th:text="${admin.getQq()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>职业</td>
                                                        <td th:text="${admin.getCareer()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>个人说明</td>
                                                        <td th:text="${admin.getInfo()}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>最近登录时间</td>
                                                        <td th:text="${#dates.format(admin.getRecentLogin(),'yyyy年MM月dd日 HH:mm:ss')}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>头像</td>
                                                        <td>
                                                            <img th:src="${admin.getImg()}" style="width: 100px;height: 100px" >
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>微信二维码</td>
                                                        <td>
                                                            <img th:src="${admin.getWechat()}" style="width: 100px;height: 100px" >
                                                        </td>
                                                    </tr>


                                                </table>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="password" role="tabpanel">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">修改密码</h5>
                                    </div>
                                    <div class="card-body">
                                            <div class="form-group">
                                                <label class="form-label">旧密码</label>
                                                <input type="password" id="pwd1" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">新密码</label>
                                                <input type="password" id="sPassword" class="form-control" >
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">确认密码</label>
                                                <input  type="password" id="pwd2" class="form-control">
                                            </div>

                                            <button type="button"  class="btn btn-primary" onclick="setPassword()">提交</button>
                                            <a class="btn btn-primary" th:href="@{/adminInfo}">返回</a>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="setInfo" role="tabpanel">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">修改基本信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-4">
                                                <div class="form-group">
                                                    <label class="form-label">头像</label>

                                                    <th:block th:if="${null == admin}">
                                                        <img id="Img" th:src="@{/background/images/img-upload.png}"
                                                             style="height: 64px;width: 64px;">
                                                    </th:block>
                                                    <th:block th:unless="${null == admin}">
                                                        <img id="Img" th:src="${admin.getImg()}"
                                                             style="width:100px ;height: 100px;display:block;">
                                                    </th:block>
                                                </div>
                                            </div>
                                            <div class="col-4"></div>
                                            <div class="col-4">
                                                <button class="btn btn-info" style="margin-bottom: 5px;"
                                                        id="uploadImg">
                                                    <i class="fa fa-picture-o"></i>&nbsp;上传头像
                                                </button>
                                            </div>
                                        </div>

                                            <div class="form-group">
                                                <label class="form-label"><span style="color: red">*</span>昵称</label>
                                                <input type="text" id="name" class="form-control" th:value="${admin.getName()}"/>
                                            </div>
                                        <div class="form-group">
                                            <label class="form-label"><span style="color: red">*</span>出生日期</label>
                                            <input type="text" id="birth" class="form-control" th:value="${#dates.format(admin.getBirthday(),'yyyy年MM月dd日')}"/>
                                        </div>
                                            <div class="form-group">
                                                <label class="form-label">所在地区</label>
                                                <input type="text" id="address" class="form-control" th:value="${admin.getAddress()}"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">职业</label>
                                                <input type="text" id="career" class="form-control" th:value="${admin.getCareer()}"/>
                                            </div>

                                            <div class="form-group">
                                                <div>
                                                    <span style="color: red">*</span><label class="form-label">性别</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input th:checked="${admin.getSex() == '男'}" class="form-check-input" type="radio" name="sex" id="man" value="男">
                                                    <label class="form-check-label" for="man" > 男</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input th:checked="${admin.getSex()== '女'}" class="form-check-input" type="radio" name="sex" id="woman" value="女">
                                                    <label class="form-check-label" for="woman"> 女</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">个人说明</label>
                                                <textarea id="info" class="form-control"  >[[${admin.getInfo()}]]</textarea>
                                            </div>

                                            <button type="button" class="btn btn-primary" onclick="setInfo()">提交</button>
                                            <a class="btn btn-primary" th:href="@{/adminInfo}">返回</a>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="setContact" role="tabpanel">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">修改联系方式</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-4">
                                                <div class="form-group">
                                                    <label class="form-label">微信二维码</label>

                                                    <th:block th:if="${null == admin}">
                                                        <img id="wechatImg" th:src="@{/background/images/img-upload.png}"
                                                             style="height: 64px;width: 64px;">
                                                    </th:block>
                                                    <th:block th:unless="${null == admin}">
                                                        <img id="wechatImg" th:src="${admin.getImg()}"
                                                             style="width:100px ;height: 100px;display:block;">
                                                    </th:block>
                                                </div>
                                            </div>
                                            <div class="col-4"></div>
                                            <div class="col-4">
                                                <button class="btn btn-info" style="margin-bottom: 5px;"
                                                        id="uploadWechatImg">
                                                    <i class="fa fa-picture-o"></i>&nbsp;上传
                                                </button>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">邮箱地址</label>
                                            <input type="text" id="email" class="form-control" th:value="${admin.getEmail()}"/>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">手机号码</label>
                                            <input type="text" id="phone" class="form-control" th:value="${admin.getPhone()}"/>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">QQ号码</label>
                                            <input type="text" id="qq" class="form-control" th:value="${admin.getQq()}"/>
                                        </div>


                                        <button type="button" class="btn btn-primary" onclick="setContact()">提交</button>
                                        <a class="btn btn-primary" th:href="@{/adminInfo}">返回</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </main>

    </div>
</div>


<!-- END main -->

<!--引入adminkit模板-->
<script src="adminkit/js/app.js"></script>

<!--<script src="background/js/modernizr.min.js"></script>-->
<!--<script src="background/js/jquery.min.js"></script>-->
<!--<script src="background/js/moment.min.js"></script>-->

<!--<script src="background/js/popper.min.js"></script>-->
<!--<script src="background/js/bootstrap.min.js"></script>-->

<!--<script src="background/js/detect.js"></script>-->
<!--<script src="background/js/fastclick.js"></script>-->
<!--<script src="background/js/jquery.blockUI.js"></script>-->
<!--<script src="background/js/jquery.nicescroll.js"></script>-->
<!--<script src="background/js/jquery.scrollTo.min.js"></script>-->
<!--<script src="background/plugins/switchery/switchery.min.js"></script>-->


<!--&lt;!&ndash; App js &ndash;&gt;-->
<!--<script src="background/js/pikeadmin.js"></script>-->


<!--&lt;!&ndash; BEGIN Java Script for this page &ndash;&gt;-->\

<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>
<script src="common/js/public.js"></script>
<script src="background/plugins/datetimepicker/js/moment.min.js"></script>
<script src="background/plugins/datetimepicker/js/daterangepicker.js"></script>
<script src="background/ajaxupload/ajaxupload.js"></script>






<script type="text/javascript">
    //解决下拉菜单不显示
    $(function () {
        $('.dropdown-toggle').dropdown();
    })

    $(function() {
        $('#birth').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
                format: 'YYYY年MM月DD日'
            }
        });
    });

    function setPassword(){
      var pwd1=$('#pwd1').val();
      var spwd=$('#sPassword').val();
      var pwd2=$('#pwd2').val();


      if(isNull(pwd1)){
          swal("请输入旧密码",{
              icon:"error",
          });
          return ;
      }
      if(isNull(spwd)){
          swal("请输入新密码",{
              icon:"error",
          });
          return ;
      }
      if(isNull(pwd2)){
          swal("请确认新密码",{
              icon:"error",
          });
          return ;
      }
      console.log(spwd);
      console.log(pwd2);
      if(spwd!=pwd2){
          swal("新密码与旧密码不符",{
              icon:"error",
          });
          return ;
      }
      $.ajax({
          type:'POST',
          url:'setPwd',
          data:{pwd1:pwd1,sPassword:spwd},
          dataType:'json',
          success: function (result) {
              console.log(result);
              //if (result.code == 200)
              if (result.code==200) {
                  console.log(result.code);
                  console.log(result.data);
                  swal({
                      title: "修改成功",
                      type: 'success',
                      showCancelButton: false,
                      confirmButtonColor: '#1baeae',
                      confirmButtonText: '返回',
                      confirmButtonClass: 'btn btn-success',
                      buttonsStyling: false
                  }).then(function () {
                      window.location.href = "logout";
                  })
              } else {
                  swal(result.message, {
                      icon: "error",
                  });
              }
              ;
          },
          error: function () {
              swal("操作失败", {
                  icon: "error",
              });
          }
      });

  }

    // END CODE FOR BASIC DATA TABLE
    var imgSrc=document.getElementById("Img").getAttribute("src");
    $(function (){
        new AjaxUpload('uploadImg',{
            action:'/admin/image/uploads',
            name:'image',
            autoSubmit:true,
            responseType:'json',
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的文件！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r != null && r.code == 200) {
                    $("#Img").attr("src", r.data);
                    // window.console.log(r.data);
                    // window.console.log($("#articleCoverImg").attr("src"));
                    imgSrc=r.data;
                    $("#Img").attr("style", "width: 128px;height: 128px;display:block;");
                    return false;
                } else {
                    alert("error");
                }
            }
        });
    });

    var wechatSrc=document.getElementById("wechatImg").getAttribute("src");
    $(function (){
        new AjaxUpload('uploadWechatImg',{
            action:'/admin/image/uploads',
            name:'image',
            autoSubmit:true,
            responseType:'json',
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的文件！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r != null && r.code == 200) {
                    $("#wechatImg").attr("src", r.data);
                    // window.console.log(r.data);
                    // window.console.log($("#articleCoverImg").attr("src"));
                    wechatSrc=r.data;
                    $("#wechatImg").attr("style", "width: 128px;height: 128px;display:block;");
                    return false;
                } else {
                    alert("error");
                }
            }
        });
    });

    function setInfo(){
        var img=imgSrc;
        var name=$('#name').val().trim();
        var birth=$('#birth').val().trim();
        var address=$('#address').val().trim();
        var career=$('#career').val().trim();
        var sex=$("input[name='sex']:checked").val();
        var info=$('#info').val().trim();

        if(isNull(name)){
            swal("请输入昵称",{
                icon:"error",
            });
            return ;
        }
        if(isNull(birth)){
            swal("请选择出生日期",{
                icon:"error",
            });
            return ;
        }
        var admin={
            "img":img,
           "name":name,
           "birthday" :birth,
            "address":address,
            "career":career,
            "sex":sex,
            "info":info
        }

        $.ajax({
            url:'/setInfo',
            dataType: 'json',
            type:'POST',
            contentType:'application/json',
            data:JSON.stringify(admin),
            success: function (result) {
                console.log(result);
                //if (result.code == 200)
                if (result.code==200) {
                    console.log(result.code);
                    console.log(result.data);
                    swal({
                        title: "修改成功",
                        type: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#1baeae',
                        confirmButtonText: '返回',
                        confirmButtonClass: 'btn btn-success',
                        buttonsStyling: false
                    }).then(function () {
                        window.location.href = "adminInfo";
                    })
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }

        });
    }

    function setContact(){
        var wechat=wechatSrc;
        var email=$('#email').val().trim();
        var phone=$('#phone').val().trim();
        var qq=$('#qq').val().trim();


        $.ajax({
            url:'/setContact',
            dataType: 'json',
            type:'POST',
            data: {wechat:wechat,email:email,phone:phone,qq:qq},
            success: function (result) {
                console.log(result);
                //if (result.code == 200)
                if (result.code==200) {
                    console.log(result.code);
                    console.log(result.data);
                    swal({
                        title: "修改成功",
                        type: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#1baeae',
                        confirmButtonText: '返回',
                        confirmButtonClass: 'btn btn-success',
                        buttonsStyling: false
                    }).then(function () {
                        window.location.href = "adminInfo";
                    })
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }

        });
    }




</script>
<!-- END Java Script for this page -->

</body>
</html>